<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{__('会员中心')}-{$webname}</title>
    {include "pub/varname"}
    {Common::css('user.css,base.css,extend.css')}
    {Common::js('jquery.min.js,base.js,common.js,jquery.validate.js,jquery.cookie.js')}
    <!--引入CSS-->
    {Common::css('res/js/webuploader/webuploader.css',false,false)}
    <!--引入JS-->
    {Common::js('webuploader/webuploader.min.js')}
    <link rel="stylesheet" href="/tools/js/datetimepicker/jquery.datetimepicker.css">
    <script src="/tools/js/datetimepicker/jquery.datetimepicker.full.js"></script>
    <style>
        .litpic_upload{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 114px;
            height: 114px;
            opacity: 0;
            z-index: 1;
        }
    </style>
</head>

<body>

{request "pub/header"}

  <div class="big">
  	<div class="wm-1200">

      <div class="st-guide">
      	<a href="{$cmsurl}">{__('首页')}</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp;{__('会员中心')}
      </div><!--面包屑-->

      <div class="st-main-page">
        {include "member/left_menu"}
        <div class="user-cont-box">
        	<div class="personal-data">
          	<h3 class="gr-tit">{__('个人资料')}</h3>
            <dl>
            	<dt>{__('头')}&nbsp;&nbsp;{__('像')}：</dt>
              <dd>
                  <div class="head-pic">
                      <img id="face" src="{$info['litpic']}" />
                      <input type="hidden" id="litpic" class="show_header" name="litpic" value="{$info['litpic']}" />
                      <input type="file" class="litpic_upload" id="litpic_upload" />
                  </div>
              </dd>
            </dl>
            <dl>
            	<dt>{__('昵')}&nbsp;&nbsp;{__('称')}：</dt>
              <dd>
              	<input type="text" class="msg-text" id="nickname" value="{$info['nickname']}" /><span class="star-ico">*</span>
              </dd>
            </dl>

            {if $GLOBALS['cfg_member_reg_company_required']==1}
            <dl>
               <dt>{$GLOBALS['cfg_member_reg_company_field_name']}：</dt>
               <dd>
                  <input type="text" class="msg-text" id="company_name" value="{$info['company_name']}" />
               </dd>
            </dl>
            {/if}


            <dl>
            	<dt>{__('性')}&nbsp;&nbsp;{__('别')}：</dt>
              <dd>
              	<span class="sex"><a {if $info['sex']=='男'}class="on"{/if} href="javascript:;">男</a><a href="javascript:;" {if $info['sex']=='女'}class="on"{/if}>女</a></span>
                <input  type="hidden" name="sex" id="sex" value="{$info['sex']}">
              </dd>
            </dl>
            <dl>
                <dt>{__('出生年月')}：</dt>
                <dd>
                    <input  {if $info['verifystatus']==2} disabled="disabled" {/if} type="text" class="default-text" id="birth_date" name="birth_date" placeholder="年/月/日"  value="{$info['birth_date']}" />
                </dd>
            </dl>
                <dl>
                    <dt>籍&nbsp;&nbsp;贯：</dt>
                    <dd>
                        <input type="text" class="default-text" name="native_place" id="native_place" value="{$info['native_place']}" />
                    </dd>
                </dl>


             <dl>
                    <dt>常住地址：</dt>
                    <dd>
                        <input type="text" class="default-text" name="address" id="address" value="{$info['address']}" />
                    </dd>
             </dl>
             <dl>
            	<dt>{__('手机号')}：</dt>
              <dd>
                  {if !empty($info['mobile'])}
              	  <span class="phone-num">{$info['mobile']}</span>
                  <a class="revise" href="{$cmsurl}member/index/modify_phone?change=1">{__('会员中心')}{__('更换手机')}&gt;</a>
                  {else}
                   <span class="phone-num">{__('未绑定')}</span> <a class="revise" href="{$cmsurl}member/index/modify_phone?change=1">{__('绑定手机')}&gt;</a>
                  {/if}
              </dd>
            </dl>
            <dl>
            	<dt>E-mail：</dt>
              <dd>
                {if !empty($info['email'])}
              	    <span class="mail">{$info['email']}</span>
                    <a class="revise" href="{$cmsurl}member/index/modify_email?change=1">{__('更换邮箱')}&gt;</a>
                {else}
                     <span class="mail">{__('未绑定')}</span> <a class="revise" href="{$cmsurl}member/index/modify_email?change=1">{__('绑定邮箱')}&gt;</a>
                {/if}

              </dd>
            </dl>
                <dl>
                    <dt>微信号：</dt>
                    <dd>
                        <input type="text" class="default-text" name="wechat" id="wechat" value="{$info['wechat']}" />

                    </dd>
                </dl>
            <dl>
                <dt>{__('星')}&nbsp;&nbsp;{__('座')}：</dt>
                <dd>

                    <select  {if $info['verifystatus']==2}  disabled="disabled" {/if} name="constellation" id="constellation" class="drop-down" style="width: 65px;">
                        {loop $constellation $v}
                        <option value="{$v}" {if $info['constellation']==$v}selected="selected"{/if}>{$v}</option>
                        {/loop}
                    </select>
                </dd>
            </dl>
            <dl>
                <dt>Q&nbsp;&nbsp;Q：</dt>
                <dd>
                    <input type="text" class="default-text" name="qq" id="qq" value="{$info['qq']}" />
                </dd>
            </dl>
            <dl>
                <dt>{__('个性签名')}：</dt>
                <dd>
                    <textarea name="signature" id="signature" class="default-textarea">{$info['signature']}</textarea>
                </dd>
            </dl>
            <hr />


            <div class="save-revise"><a href="javascript:;" class="saveinfo">{__('保存修改')}</a></div>
            <div class="success-out-box" style=" display:none">
            	<div class="box-con">
              	<h3><img src="{$GLOBALS['cfg_public_url']}images/success-ico.png" />{__('个人资料修改成功')}！</h3>
                <a href="javascript:;" class="close_success">{__('确 定')}</a>
              </div>
            </div><!--修改成功弹出框-->
          </div>
        </div>
      </div>

    </div>
  </div>
<input type="hidden" id="frmcode" value="{$frmcode}">
{Common::js('layer/layer.js')}

{request "pub/footer"}

<script>
    var date = new Date();
    var now_year = date.getFullYear();
    $.datetimepicker.setLocale('ch');
    $('#birth_date').datetimepicker({
        format:'Y/m/d',
        formatDate:'Y/m/d',
        timepicker:false,
        maxDate:date,
        yearStart:'1900',
        yearEnd:now_year
    });
    $(function(){

        //导航选中
        $("#nav_userinfo").addClass('on');
        if(typeof(on_leftmenu_choosed)=='function')
        {
            on_leftmenu_choosed();
        }

        $(".litpic_upload").change(function () {
            var ziduan = $(this).attr("id");
            var file = document.getElementById(ziduan);
            var fileList = file.files; //获取的图片文件
            if (fileList.length > 1 ) {
                alert("只能上传一张图");
                return;  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
            }
            console.log(fileList)
            for (var i = 0; i < fileList.length; i++) {
                var imgUrl = window.URL.createObjectURL(fileList[i]);
                $('#face').attr('src',imgUrl);
                //ajax上传到服务器
                var formData = new FormData();
                formData.append('file', $(this)[0].files[0]);  //添加图片信息的参数
                //formData.append('sizeid',123);  //添加其他参数
                $.ajax({
                    url: SITEURL + 'member/index/ajax_upload_picture',
                    type: 'POST',
                    cache: false, //上传文件不需要缓存
                    data: formData,
                    dataType: 'json',
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    timeout: 3000,
                    success: function (rs) {
                        if (rs.status == 1) {
                            var fileurl = rs.litpic;
                            var $input = $("<input id='litpic' name='litpic' value='" + fileurl + "' type='hidden'>");
                            $('.show_header').remove();
                            $('.head-pic').append($input);
                        }
                    },
                    error: function (data) {
                        layer.alert("上传失败",{icon:5});
                    }
                })
            }
        });


                // upload('#uploadBtn');
            //
            // //上传
            // $('.upload').click(function(){
            //     $('#uploadBtn').find('input').click();
            // })


        //性别点击选择
        $(".sex a").click(function(){
            var verifystatus = '{$info['verifystatus']}';
            if(verifystatus==2)
            {
                return false;
            }
            $("#sex").val($(this).html());
            $(this).addClass('on').siblings().removeClass('on');
        });

        //关闭保存成功信息提示框
        $('.close_success').click(function(){
            $(".success-out-box").hide();
        });
        //保存修改
       $('.saveinfo').click(function(){
           var nickname = $("#nickname").val();
           if($.trim(nickname)=='')
           {
               layer.msg('昵称不能为空!',{icon:2,time:1000});
               return false;
           }

           var nickname_reg = /\'|\"|\<|\>|\s|\\|\//ig
           if(nickname_reg.test(nickname))
           {
               layer.msg('昵称不能包含<、>、\\、/、\'、\" 及空格等特殊英文字符',{icon:2,time:2000});
               return false;
           }

           var nickname_length =get_str_length(nickname);
           if(nickname_length>16)
           {
               layer.msg('昵称不能超过16个字符(中文占两个字符)',{icon:2,time:1000});
               return false;
           }

           var sex = $("#sex").val();
           var truename = $("#truename").val();
           var cardid = $("#cardid").val();
           var address = $("#address").val();
           var frmcode = $("#frmcode").val();
           var litpic = $("#litpic").val();
           var native_place = $("#native_place").val();
           var wechat = $("#wechat").val();
           var constellation = $("#constellation").val();
           var qq = $("#qq").val();
           var signature = $("#signature").val();
           var birth_date=$("#birth_date").val();
           var company_name = $("#company_name").val();
           $.ajax({
               type:'post',
               url:SITEURL+'member/index/ajax_userinfo_save',
               data:{
                   wechat:wechat,
                   native_place:native_place,
                   nickname:nickname,
                   company_name:company_name,
                   sex:sex,
                   truename:truename,
                   cardid:cardid,
                   address:address,
                   frmcode:frmcode,
                   litpic:litpic,
                   constellation:constellation,
                   qq:qq,
                   signature:signature,
                   birth_date:birth_date
               },
               dataType:'json',
               success:function(data){
                   if(data.status){
                       //$(".success-out-box").show();
                       layer.msg("{__('个人资料修改成功')}!",{
                           icon:6,
                           time:1000
                       })
                   }else{
                       layer.msg(data.msg, {icon:5});
                       return false;
                   }
               }
           })



       })
    })

    function get_str_length(str){
        var realLength = 0, len = str.length, charCode = -1;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) realLength += 1;
            else realLength += 2;
        }
        return realLength;
    }
    //webuploader上传
//     function upload(obj) {
//         //obj='#imas'jquery对象;
//         //正面上传实例
//         var uploader = new WebUploader.Uploader({
//             // 选完文件后，是否自动上传。
//             auto: true,
//             // swf文件路径
//             swf: '/res/js/webuploader/Uploader.swf',
//             // 文件接收服务端。
//             server: SITEURL + 'member/index/ajax_upload_picture',
//             // 选择文件的按钮。可选。
//             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
//             pick:obj,
//             duplicate: true,
//             // 只允许选择图片文件。
//             accept: {
//                 title: 'Images',
//                 extensions: 'jpg,jpeg,png',
//                 mimeTypes: 'image/*'
//             },
//             //上传前压缩项
//             compress:{
//                 width: 1600,
//                 height: 1600,
//                 // 图片质量。仅仅有type为`image/jpeg`的时候才有效。
//                 quality: 90,
//                 // 是否同意放大，假设想要生成小图的时候不失真。此选项应该设置为false.
//                 allowMagnify: false,
//                 // 是否同意裁剪。
//                 crop: false,
//                 // 是否保留头部meta信息。
//                 preserveHeaders: true,
//                 // 假设发现压缩后文件大小比原来还大，则使用原来图片
//                 // 此属性可能会影响图片自己主动纠正功能
//                 noCompressIfLarger: false,
//                 // 单位字节，假设图片大小小于此值。不会採用压缩。(大于2M压缩)
//                 compressSize: 1024*1024*2
//             }
//         });
//         // 文件上传过程中创建进度条实时显示。
//         uploader.on( 'uploadProgress', function( file, percentage ) {
//
//         });
//         // 文件上传成功
//         uploader.on( 'uploadSuccess', function( file,data) {
//             //如果上传成功
//             if (data.status) {
//                 $('#face').attr('src',data.litpic);
//                 $('#litpic').val(data.litpic);
//             }
//         });
//         // 完成上传完了，成功或者失败，先删除进度条。
//         uploader.on( 'uploadComplete', function( file ) {
// //                $.layer.close();
//         });
//     }
</script>

</body>
</html>
